type Users = {
    id: number,
    name: string,
    username: string,
    email: string,
    phone: string
}

export default async function UserServer() {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    const users: Users[] = await response.json();
    return (
        <ul className="space-y-4 p-4">
            {
                users.map(user => (
                    <li key={user.id} className="p-2 border rounded-lg border-gray-500 shadow-md">
                        <div className="font-bold">{user.name}</div>
                        <div className="text-sm">
                            <div>Username: {user.username}</div>
                            <div>Email: {user.email}</div>
                            <div>Phone: {user.phone}</div>
                        </div>
                    </li>
                ))
            }
        </ul>
    )
}
